Animate with the react-spring Library — Keyframes

With the react-spring library, we can render animations in our React app easily.

In this article, we’ll take a look at how to get started with react-spring.

Animate Mounting or Unmounting Components

We can animate mounting or unmounting components.

For example, we can write:

import React, { useState } from "react";
import { Transition } from "react-spring/renderprops";

export default function App() {
  const [show, set] = useState(false);

  return (
    <div>
      <button onClick={() => set(!show)}>toggle</button>
      <Transition
        items={show}
        from={{ opacity: 0 }}
        enter={{ opacity: 1 }}
        leave={{ opacity: 0 }}
      >
        {(show) =>
          show &&
          ((props) => (
            <div style={props}>
              <span role="img" aria-label="smile">
                ✌
              </span>
              ️
            </div>
          ))
        }
      </Transition>
    </div>
  );
}

to show the emoji when the show state is true .

We get the show state from the Transition component’s items prop.

The from , enter , and leave props have the styles to show when the animation starts, when the item enters the screen, and when it leaves the screen respectively.

The props parameter has the styles that we’re rendering during animation.

Keyframes

The Keyframes component lets us chain, compose, and orchestrate animations.

For example, we can write:

import React from "react";
import { config, Keyframes } from "react-spring/renderprops";

const delay = (ms) => new Promise((resolve) => resolve, ms);

const Container = Keyframes.Spring({
  show: { opacity: 1 },
  showAndHide: [{ color: "green" }, { color: "red" }],
  wiggle: async (next, cancel, ownProps) => {
    await next({ x: 100, config: config.wobbly });
    await delay(1000);
    await next({ x: 0, config: config.gentle });
  }
});

export default function App() {
  return (
    <div>
      <Container state="showAndHide">
        {(styles) => <div style={styles}>Hello</div>}
      </Container>
    </div>
  );
}

Then we animate our text from green to red since we have the showAndHide property with an array of styles for the start and end of the animation respectively.

We use the Container component, which is created from the Keyframes.Spring function.

The state is set to the property name with the keyframes that we want to animate.

We can also specify one keyframe with an object, or an async function with the next , cancel , and ownProps parameters.

next is called with the animation config and styles to apply.

We can also pass in a function to Keyframes.Spring to create the animation.

For instance, we can write:

import React from "react";
import { Keyframes } from "react-spring/renderprops";

const Script = Keyframes.Spring(async (next) => {
  while (true) {
    await next({ color: "red", from: { color: "green" }, reset: true });
  }
});

export default function App() {
  return (
    <div>
      <Script>{(styles) => <div style={styles}>Hello</div>}</Script>
    </div>
  );
}

We pass the callback into Keyframes.Spring that calls next to toggles color between red and green.

Also, we can pass in an array into Keyframes.Spring to add the keyframes by writing:

import React from "react";
import { Keyframes } from "react-spring/renderprops";

const Chain = Keyframes.Spring([{ color: "red" }, { color: "green" }]);

export default function App() {
  return (
    <div>
      <Chain>{(styles) => <div style={styles}>Hello</div>}</Chain>
    </div>
  );
}

Conclusion

We can add keyframes to our animations with react-spring’s Keyframes.Spring function.